<template>
	<view class="question-detail-page">
		<!-- 顶部导航栏 -->
		<!-- <view class="nav-header">
			<view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="nav-title">
				<text>{{ questionDetail.title }}</text>
			</view>
		</view> -->

		<!-- 样式1：提现收费规则说明 -->
		<view v-if="questionId === '1'" class="withdrawal-rules-content">
			<!-- 规则标题区域 -->
			<view class="rules-header">
				<view class="rules-icon">
					<u-icon name="file-text" color="#4CAF50" size="20"></u-icon>
				</view>
				<text class="rules-title">优享优品提现收费规则</text>
			</view>

			<!-- 费用明细 -->
			<view class="fee-list">
				<view class="fee-item">
					<text class="fee-label">对私</text>
					<text class="fee-value">单笔 ¥ 2.00</text>
				</view>
				<view class="fee-item">
					<text class="fee-label">对公</text>
					<text class="fee-value">单笔 ¥ 8.00</text>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="notice-info">
				<u-icon name="info-circle" color="#FF9800" size="16"></u-icon>
				<text class="notice-text">最低提现金额为100元</text>
			</view>
		</view>

		<!-- 样式2：到账时间说明 -->
		<view v-else-if="questionId === '2'" class="time-rules-content">
			<view class="time-header">
				<view class="time-icon">
					<u-icon name="clock" color="#2196F3" size="20"></u-icon>
				</view>
				<text class="time-title">提现到账时间说明</text>
			</view>

			<view class="time-list">
				<view class="time-item">
					<view class="time-label">
						<text class="time-type">工作日提现</text>
						<text class="time-desc">16:00前提交</text>
					</view>
					<text class="time-value">次日到账</text>
				</view>
				<view class="time-item">
					<view class="time-label">
						<text class="time-type">工作日提现</text>
						<text class="time-desc">16:00后提交</text>
					</view>
					<text class="time-value">第三日到账</text>
				</view>
				<view class="time-item">
					<view class="time-label">
						<text class="time-type">节假日提现</text>
						<text class="time-desc">顺延处理</text>
					</view>
					<text class="time-value">工作日到账</text>
				</view>
			</view>

			<view class="time-notice">
				<u-icon name="warning" color="#FF5722" size="16"></u-icon>
				<text class="notice-text">如遇银行系统维护，到账时间可能延迟</text>
			</view>
		</view>

		<!-- 样式3：加急处理说明 -->
		<view v-else-if="questionId === '3'" class="urgent-processing-content">
			<!-- 问题标题 -->
			<view class="question-title-section">
				<view class="title-indicator"></view>
				<text class="question-title-text">优享优品余额发起提现后可加急处理吗？</text>
			</view>

			<!-- 内容说明 -->
			<view class="content-section">
				<text class="content-text">提现发起后不支持加急处理。为了保障资金安全，提现发起后是由系统自动对接，人工无法干预，拨打客服电话也是无法加急，还请耐心等待。</text>
			</view>

			<!-- 注意事项 -->
			<view class="notice-section">
				<text class="notice-label">注：</text>
				<text class="notice-content">一旦提交了提现申请后是不能撤销的。</text>
			</view>
		</view>

		<!-- 默认样式：普通问题内容 -->
		<view v-else class="question-content">
			<view class="question-title">
				<text>{{ questionDetail.title }}</text>
			</view>
			<view class="question-answer">
				<text>{{ questionDetail.content }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionId: '',
				questionDetail: {
					title: '',
					content: ''
				}
			}
		},
		onLoad(options) {
			this.questionId = options.id
			this.loadQuestionDetail()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 加载问题详情
			loadQuestionDetail() {
				const questions = {
					'1': {
						title: '关于优享优品平台余额提现收费规则说明',
						content: '1. 提现手续费为提现金额的1%，最低收费1元\n2. 单笔提现金额不得低于10元\n3. 每日提现次数不超过3次\n4. 提现金额将在1-3个工作日内到账'
					},
					'2': {
						title: '优享优品平台余额提现到账时间说明',
						content: '1. 工作日提现：当日16:00前提交，次日到账\n2. 工作日提现：当日16:00后提交，第三日到账\n3. 节假日提现：顺延至工作日处理\n4. 如遇银行系统维护，到账时间可能延迟'
					},
					'3': {
						title: '优享优品平台余额发起提现后可加急处理说明',
						content: '1. 加急处理需额外收取5元手续费\n2. 加急提现将在2小时内处理完成\n3. 仅限工作日9:00-18:00期间可申请加急\n4. 加急处理不保证银行到账时间'
					}
				}

				this.questionDetail = questions[this.questionId] || {
					title: '问题不存在',
					content: '抱歉，您查找的问题不存在'
				}
				uni.setNavigationBarTitle({
					title: this.questionDetail.title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.question-detail-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 顶部导航栏
	.nav-header {
		height: 88rpx;
		background-color: #ff5722;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;

		.nav-back {
			position: absolute;
			left: 30rpx;
		}

		.nav-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
			flex: 1;
			text-align: center;
		}
	}

	// 样式1：提现收费规则说明
	.withdrawal-rules-content {
		background-color: #fff;
		// margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.rules-header {
		background-color: #f8f8f8;
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;

		.rules-icon {
			margin-right: 20rpx;
		}

		.rules-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333;
		}
	}

	.fee-list {
		padding: 0 40rpx;
	}

	.fee-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.fee-label {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}

		.fee-value {
			font-size: 32rpx;
			color: #999;
		}
	}

	.notice-info {
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		background-color: #fff9e6;
		margin: 20rpx 40rpx 40rpx;
		border-radius: 8rpx;

		.notice-text {
			font-size: 28rpx;
			color: #ff9800;
			margin-left: 16rpx;
		}
	}

	// 样式2：到账时间说明
	.time-rules-content {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.time-header {
		background-color: #e3f2fd;
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #bbdefb;

		.time-icon {
			margin-right: 20rpx;
		}

		.time-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #1976d2;
		}
	}

	.time-list {
		padding: 0 40rpx;
	}

	.time-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 35rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.time-label {
			display: flex;
			flex-direction: column;

			.time-type {
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
			}

			.time-desc {
				font-size: 24rpx;
				color: #999;
			}
		}

		.time-value {
			font-size: 28rpx;
			color: #2196f3;
			font-weight: 500;
		}
	}

	.time-notice {
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		background-color: #ffebee;
		margin: 20rpx 40rpx 40rpx;
		border-radius: 8rpx;

		.notice-text {
			font-size: 28rpx;
			color: #ff5722;
			margin-left: 16rpx;
		}
	}

	// 样式3：加急处理说明
	.urgent-processing-content {
		background-color: #f5f5f5;
		padding: 0;
	}

	.question-title-section {
		background-color: #fff;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 2rpx;

		.title-indicator {
			width: 6rpx;
			height: 40rpx;
			background-color: #ff5722;
			border-radius: 3rpx;
			margin-right: 20rpx;
			margin-top: 4rpx;
			flex-shrink: 0;
		}

		.question-title-text {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			line-height: 1.5;
			flex: 1;
		}
	}

	.content-section {
		background-color: #fff;
		padding: 40rpx 30rpx;
		margin-bottom: 2rpx;

		.content-text {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	.notice-section {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: flex-start;

		.notice-label {
			font-size: 28rpx;
			color: #ff5722;
			font-weight: 500;
			margin-right: 8rpx;
			flex-shrink: 0;
		}

		.notice-content {
			font-size: 28rpx;
			color: #ff5722;
			line-height: 1.5;
			flex: 1;
		}
	}

	// 默认问题内容样式
	.question-content {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;

		.question-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 30rpx;
			line-height: 1.5;
		}

		.question-answer {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			white-space: pre-line;
		}
	}
</style>